<template>
    <ph-button icon="caret-down" shape="square" class="ph-btn-color" :style="{'--ph-color-preview':value}" @click="onClick" ref="colorBtn">
    </ph-button>
</template>
<script lang="ts">
import { defineComponent, getCurrentInstance, inject, PropType, Ref, ref } from 'vue'
import PhButton from './button.vue'

export default defineComponent({
    components:{PhButton},
    props:{
        value:{type:String,default:"#00000000"},
        preshow:{type:Boolean,default:true},
        precolors:{type:Array as PropType<Array<string>>}
    },
    setup(props,{emit}){
        const ins = getCurrentInstance()
        const colorBtn = ref<{$el:HTMLElement}|null>(null)
        const onClick = ()=>{
            const t = colorBtn.value?.$el
            if(!t)return
            let {left,top,height,width} = t.getBoundingClientRect()
            if(t.parentElement&&t.parentElement.dataset.ph==="color-picker"){
                const rect = t.parentElement.getBoundingClientRect()
                left = rect.left
                top = rect.top
                height = rect.height
                width = rect.width
            }
            ins?.proxy?.$phColorPicker(props.value,{
                left,
                top,
                height,
                width,
                preshow:props.preshow,
                precolors:props.precolors
            }).done((v:string)=>{
                emit("pick",v)
            })
        }
        return {onClick,colorBtn}
    }
})
</script>
<style lang="scss">
.ph-btn-color{
    --ph-color-preview:transparent;
    &:hover{
        background-color: var(--ph-light-d1);
    }
    &:before,
    &:after{
        content: "";
        position: absolute;
        width: 80%;
        height: 80%;
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        border-radius: 3px;
        overflow: hidden;
    }
    &:before{
        background-image: url();
        background-position: center;
    }
    &:after{
        border:1px solid #99999988;
        background-color: var(--ph-color-preview);
    }
    .ph-icon{
        position: relative;
        z-index: 2;
        color: #FFFFFF;
    }
}
</style>
